<template>
    <div class="cart">
        <h4>全部商品</h4>
        <div class="cart-main">
            <div class="cart-th">
                <div class="cart-th1">全部</div>
                <div class="cart-th2">商品</div>
                <div class="cart-th3">单价(元)/租期(天)/平米</div>
                <div class="cart-th5">房东电话</div>
                <div class="cart-th6">操作</div>
            </div>
            <div class="cart-body">
                <ul class="cart-list" v-for="item in page" :key="item.id">
                    <li class="cart-list-con1">
                        <input type="checkbox" name="chk_list" checked="">
                    </li>
                    <li class="cart-list-con2">
                        <video :src="item.avatar" style="width: 82px;height: 102px"/>
                        <div class="item-msg">{{item.address+item.addressInfo+item.houseDescribe}}</div>
                    </li>
                    <li class="cart-list-con3">
                        <div class="item-txt">{{item.price}}/{{item.leaseTerm}}/{{item.area}}</div>
                    </li>
                    <li class="cart-list-con4">
                        <span class="price">{{item.phoneNumber}}</span>
                    </li>
                    <li class="cart-list-con7">
                        <a @click="deleteOrder(item.id)" class="sindelet"><i class="el-icon-delete">移除</i></a>
                        <br>
                    </li>
                </ul>
            </div>
        </div>
        <div class="cart-tool">
            <div class="select-all">
            </div>
            <div class="option">
            </div>
            <div class="money-box">
                <div class="chosed">已选择
                    <span>{{this.count}}</span>件商品
                </div>
                <div class="sumprice">
                    <em>总价（不含运费） ：</em>
                    <i class="summoney">{{totalPrice()}}</i>
                </div>
                <div class="sumbtn">
                    <router-link class="sum-btn" to="/pay">结算</router-link>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {getAllOrder, deleteOrder} from '@/api/index'

    export default {
        name: 'ShopCart',
        inject: ['reload'],
        data() {
            return {
                sum:undefined,
                count:undefined,
                addressInfo:undefined,
                user_id: undefined,
                page: {
                },
            }
        },
        created() {
            this.LoginInfo();
            this.AllOrder();
        },
        methods: {
            LoginInfo() {
                let data = JSON.parse(sessionStorage.getItem("LoginInfo"));
                this.user_id = data.id
                return JSON.parse(sessionStorage.getItem("LoginInfo"))
            },
            AllOrder() {

                getAllOrder(this.user_id).then(response => {
                    if (response.code == 200) {
                        this.page = response.data
                        this.count=response.data.length
                    } else {
                        this.$notify({
                            title: '警告',
                            message: response.message,
                            type: 'warning'
                        });
                    }
                })
            },
            deleteOrder(id) {
                this.$confirm('是否删除该订单信息?', '警告', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    deleteOrder(this.user_id, id).then(response => {
                        this.RightMessage(this, '成功', response.message, 'success')
                        this.reload()
                    })
                }).catch(() => {
                    this.$notify.info({
                        title: '消息',
                        message: '已取消删除订单'
                    });
                })
            },
            totalPrice() {
                let sum = 0;
                let addressInfo='';
                getAllOrder(this.user_id).then(response => {
                    response.data.forEach((item) => {
                        //遍历prodAllPrice这个字段，并累加
                        sum += item.price;
                        addressInfo+='和'+item.addressInfo
                    });
                    this.sum = sum;
                    this.addressInfo=addressInfo;
                })
                sessionStorage.setItem("PRICE",JSON.stringify(this.sum));
                sessionStorage.setItem("ADDRESSINFO",JSON.stringify(this.addressInfo));
                return this.sum
            }
        }
    }
</script>

<style lang="less" scoped>
    .cart {
        width: 1200px;
        margin: 0 auto;

        h4 {
            margin: 9px 0;
            font-size: 14px;
            line-height: 21px;
        }

        .cart-main {
            .cart-th {
                background: #f5f5f5;
                border: 1px solid #ddd;
                padding: 10px;
                overflow: hidden;

                & > div {
                    float: left;
                }

                .cart-th1 {
                    width: 25%;

                    input {
                        vertical-align: middle;
                    }

                    span {
                        vertical-align: middle;
                    }
                }

                .cart-th2 {
                    width: 30%;
                }

                .cart-th3,
                .cart-th5,
                .cart-th6 {
                    width: 15%;

                }
            }

            .cart-body {
                margin: 15px 0;
                border: 1px solid #ddd;

                .cart-list {
                    padding: 10px;
                    border-bottom: 1px solid #ddd;
                    overflow: hidden;

                    & > li {
                        float: left;
                    }

                    .cart-list-con1 {
                        width: 19.1667%;
                    }

                    .cart-list-con2 {
                        width: 25%;

                        img {
                            width: 82px;
                            height: 82px;
                            float: left;
                        }

                        .item-msg {
                            float: left;
                            width: 150px;
                            margin: 0 10px;
                            line-height: 18px;
                        }
                    }

                    .cart-list-con3 {
                        width: 27.8333%;

                        .item-txt {
                            text-align: center;
                        }
                    }

                    .cart-list-con4 {
                        width: 15.5%;

                    }

                    .cart-list-con5 {
                        width: 17.5%;

                        .mins {
                            border: 1px solid #ddd;
                            border-right: 0;
                            float: left;
                            color: #666;
                            width: 6px;
                            text-align: center;
                            padding: 8px;
                        }

                        input {
                            border: 1px solid #ddd;
                            width: 40px;
                            height: 33px;
                            float: left;
                            text-align: center;
                            font-size: 14px;
                        }

                        .plus {
                            border: 1px solid #ddd;
                            border-left: 0;
                            float: left;
                            color: #666;
                            width: 6px;
                            text-align: center;
                            padding: 8px;
                        }
                    }
                }
            }
        }

        .cart-tool {
            overflow: hidden;
            border: 1px solid #ddd;

            .select-all {
                padding: 10px;
                overflow: hidden;
                float: left;

                span {
                    vertical-align: middle;
                }

                input {
                    vertical-align: middle;
                }
            }

            .option {
                padding: 10px;
                overflow: hidden;
                float: left;

                a {
                    float: left;
                    padding: 0 10px;
                    color: #666;
                }
            }

            .money-box {
                float: right;

                .chosed {
                    line-height: 26px;
                    float: left;
                    padding: 0 10px;
                }

                .sumprice {
                    width: 200px;
                    line-height: 22px;
                    float: left;
                    padding: 0 10px;

                    .summoney {
                        color: #c81623;
                        font-size: 16px;
                    }
                }

                .sumbtn {
                    float: right;

                    a {
                        display: block;
                        position: relative;
                        width: 96px;
                        height: 52px;
                        line-height: 52px;
                        color: #fff;
                        text-align: center;
                        font-size: 18px;
                        font-family: "Microsoft YaHei";
                        background: #e1251b;
                        overflow: hidden;
                    }
                }
            }
        }
    }
</style>
